<!DOCTYPE html>
<html>

<head>
    <title>跑赢博尔特-虎扑跑步</title>
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">

    <script type="text/javascript">
        var i = new Date().getTime() % 5;
        if (i < 3) {
            document.write('<script type="text/javascript" src="/static/py/js/createjs.js"><\/script>');
        } else {
            document.write('<script type="text/javascript" src="/static/py/js/createjs.js"><\/script>');
        }
        var isDesktop = navigator['userAgent'].match(/(ipad|iphone|ipod|android|windows phone)/i) ? false : true;
        var fontunit = isDesktop ? 20 : ((window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth) / 320) * 10;
        document.write('<style type="text/css">' +
            'html,body {}' +
            (isDesktop ? '#welcome,#GameTimeLayer,#GameLayerBG,#GameScoreLayer.SHADE{position: absolute;}' :
                '#welcome,#GameTimeLayer,#GameLayerBG,#GameScoreLayer.SHADE{position:fixed;}@media screen and (orientation:landscape) {#landscape {display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox;}}') +
            '</style>');
    </script>
    <style type="text/css">
        @media only screen and (max-width:359px) {
            html {
                font-size: 10.66667px
            }
        }

        @media only screen and (min-width:360px) and (max-width:399px) {
            html {
                font-size: 12px
            }
        }

        @media only screen and (min-width:400px) and (max-width:479px) {
            html {
                font-size: 13.33333px
            }
        }

        @media only screen and (min-width:480px) and (max-width:539px) {
            html {
                font-size: 16px
            }
        }

        @media only screen and (min-width:540px) and (max-width:639px) {
            html {
                font-size: 18px
            }
        }

        @media only screen and (min-width:640px) and (max-width:719px) {
            html {
                font-size: 21.33333px
            }
        }

        @media only screen and (min-width:720px) {
            html {
                font-size: 24px
            }
        }

        body {
            font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
            margin: 0;
            padding: 0;
        }

        .loading {
            background-image: url("/static/py/images/download.gif");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: auto 60%;
        }

        .SHADE {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            bottom: 0;
            z-index: 11;
        }

        .BOX-V {
            box-orient: vertical;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            -ms-flex-direction: column;
        }

        .BOX-D {
            box-align: end;
            box-pack: center -webkit-box-align: end;
            -webkit-box-pack: center;
            -ms-flex-align: end;
            -ms-flex-pack: center;
        }

        .BOX-M {
            box-align: center;
            box-pack: center;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            -ms-flex-align: center;
            -ms-flex-pack: center;
        }

        .BOX-M img {
            width: 100%;
        }

        .BOX-S {
            display: block;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        .BOX,
        .BOX-V,
        .BOX-D,
        .BOX-M,
        .FOOTER {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }

        .BBOX,
        .BOX,
        .APP-STAGE,
        .INSET-STAGE,
        .STAGE,
        .PAGE-STAGE,
        .PAGE,
        .PAGE-BOX,
        .INSET-PAGE,
        .FOOTER {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

        #welcome {
            background-color: rgba(0, 0, 0, .85);
            text-align: center;
            font-weight: bold;
            overflow: hidden;
        }

        #GameTimeLayer {
            top: 1em;
            left: 0;
            width: 100%;
            text-align: center;
            color: #f00;
            font-size: 4em;
            text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
            overflow: hidden;
        }

        #GameLayerBG {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            background: #fff;
        }

        .GameLayer {
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .block {
            position: absolute;
            border-top: 1px solid #1D70B6;
            background-repeat: no-repeat;
            background-position: center;
        }

        .t1,
        .t2,
        .t3,
        .t4,
        .t5 {
            background-size: auto 100%;
            background-image: url(/static/py/images/b.jpg);
        }

        .tt1,
        .tt2,
        .tt3,
        .tt4,
        .tt5 {
            background-size: auto 86%;
            background-image: url(/static/py/images/t.jpg);
        }

        .bl {
            border-left: 1px solid #1D70B6;
        }

        @-ms-keyframes flash {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @-webkit-keyframes flash {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        .flash {
            -webkit-animation: flash .2s 3;
            animation: flash .2s 3;
        }

        .bad {
            background-color: #f00;
            -webkit-animation: flash .2s 3;
            animation: flash .2s 3;
        }

        * {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -ms-tap-highlight-color: rgba(0, 0, 0, 0);
            tap-highlight-color: rgba(0, 0, 0, 0);
            -ms-user-select: none;
        }

        #GameScoreLayer {
            font-size: 1.33rem;
            color: #fff;
            text-align: center;
            overflow-y: auto;
        }

        #GameScoreLayer .img-01 img {
            width: 22.5rem;
        }
        /*.bgc1{background-color:#23378B;}
        .bgc2{background-color:#009FE3;}
        .bgc3{background-color:#E42313;}
        .bgc4{background-color:#FCBD1B;}
        .bgc5{background-color:#34002A;}*/

        .bgc1,
        .bgc2,
        .bgc3,
        .bgc4,
        .bgc5 {
            background-color: rgba(0, 0, 0, .85);
        }

        .share-icon {
            width: 1.7em;
            background-repeat: no-repeat;
            background-size: auto 100%;
        }

        .btn:active {
            opacity: 0.9;
        }

        #landscape {
            display: none;
        }

        #gameBody {
            position: relative;
            width: 720px;
            margin: 0 auto;
            height: 100%;
        }

        #share-wx {
            background: rgba(0, 0, 0, 0.8);
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 10000;
            display: none;
        }

        #share-wx img {
            width: 14.875rem;
        }

        .logo {
            display: block;
            padding: 0.6rem 0 2.1rem;
        }

        .logo img {
            width: 13.7rem;
        }

        #ready-btn {
            width: 20rem;
            margin: 0 auto;
            font-size: 2rem;
        }

        .btn {
            width: 12.3rem;
            height: 4.6rem;
            line-height: 4.6rem;
            overflow: hidden;
            font-family: 'Microsoft YaHei';
            color: #fff;
            border-radius: 2.3rem;
            //box-shadow: 0 .25rem 0 0 #fd5a7f inset, 0 -.25rem 0 0 #fc213c inset;
            font-size: 1.5rem;
            background-color: #22c5e5;
        }

        .score {
            color: #fc3d61;
            font-size: 3.4rem;
            font-weight: bold;
        }

        .num-s {
            color: #fc3d61;
            font-size: 1.8rem;
            font-weight: bold;
        }

        .num-m {
            color: #fc3d61;
            font-size: 1.75rem;
            font-weight: bold;
        }

        .game-score-wp {
            border-radius: 1rem;
            padding: .9rem 8.8rem .75rem .9rem;
            min-height: 9.41rem;
            position: relative;
            background: url(/static/py/images/dog.png) no-repeat 96% center #323232;
            background-size: 7.8rem auto;
        }

        .down-load {
            display: block;
            height: 4.08rem;
            padding-bottom: 3.71rem;
            margin: 1rem auto 0;
            width: 26.3rem;
            background: url(/static/py/images/down-app-min.png?v=2) no-repeat;
            background-size: 26.291rem auto;
        }

        .down-load a {
            display: block;
            height: 4.08rem;
            width: 100%;
        }

        .qrcode {
            width: 100%;
            min-height: 11.125rem;
            padding: 1.125rem 0;
            background: #393939;
        }

        .qrcode img {
            display: block;
            margin: 0 auto;
            width: 27.25rem;
        }
    </style>

</head>

<body onload="init()">
<script src="/static/py/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        window.shareData = {
            "imgUrl": "http://irun.hupu.com/static/py/images/t.jpg",
            "timeLineLink": "http://irun.hupu.com/show/py",
            "tTitle": "跑赢博尔特",
            "tContent": "你能跑多快你知道么？"
        };

        if (isDesktop)
            document.write('<div id="gameBody">');

        var body, blockSize, GameLayer = [],
            GameLayerBG, touchArea = [],
            GameTimeLayer;
        var transform, transitionDuration;

        function init(argument) {
            showWelcomeLayer();
            body = document.getElementById('gameBody') || document.body;
            body.style.height = window.innerHeight + 'px';
            transform = typeof(body.style.webkitTransform) != 'undefined' ? 'webkitTransform' : (typeof(body.style.msTransform) != 'undefined' ? 'msTransform' : 'transform');
            transitionDuration = transform.replace(/ransform/g, 'ransitionDuration');

            GameTimeLayer = document.getElementById('GameTimeLayer');
            GameLayer.push(document.getElementById('GameLayer1'));
            GameLayer[0].children = GameLayer[0].querySelectorAll('div');
            GameLayer.push(document.getElementById('GameLayer2'));
            GameLayer[1].children = GameLayer[1].querySelectorAll('div');
            GameLayerBG = document.getElementById('GameLayerBG');
            if (GameLayerBG.ontouchstart === null) {
                GameLayerBG.ontouchstart = gameTapEvent;
            } else {
                GameLayerBG.onmousedown = gameTapEvent;
                document.getElementById('landscape-text').innerHTML = '进入赛场';
                document.getElementById('landscape').onclick = winOpen;
            }
            gameInit();
            window.addEventListener('resize', refreshSize, false);

            setTimeout(function() {
                var btn = document.getElementById('ready-btn');
                btn.className = 'btn';
                btn.innerHTML = '开始跑步'
                btn.style.backgroundColor = '#22c5e5';
                btn.style.width = '20rem';
                btn.onclick = function() {
                    closeWelcomeLayer();
                }

            }, 500);
        }

        function winOpen() {
            window.open(location.href + '?r=' + Math.random(), 'nWin', 'height=500,width=320,toolbar=no,menubar=no,scrollbars=no');
            var opened = window.open('about:blank', '_self');
            opened.opener = null;
            opened.close();
        }
        var refreshSizeTime;

        function refreshSize() {
            clearTimeout(refreshSizeTime);
            refreshSizeTime = setTimeout(_refreshSize, 200);
        }

        function _refreshSize() {
            countBlockSize();
            for (var i = 0; i < GameLayer.length; i++) {
                var box = GameLayer[i];
                for (var j = 0; j < box.children.length; j++) {
                    var r = box.children[j],
                        rstyle = r.style;
                    rstyle.left = (j % 4) * blockSize + 'px';
                    rstyle.bottom = Math.floor(j / 4) * blockSize + 'px';
                    rstyle.width = blockSize + 'px';
                    rstyle.height = blockSize + 'px';
                }
            }
            var f, a;
            if (GameLayer[0].y > GameLayer[1].y) {
                f = GameLayer[0];
                a = GameLayer[1];
            } else {
                f = GameLayer[1];
                a = GameLayer[0];
            }
            var y = ((_gameBBListIndex) % 10) * blockSize;
            f.y = y;
            f.style[transform] = 'translate3D(0,' + f.y + 'px,0)';

            a.y = -blockSize * Math.floor(f.children.length / 4) + y;
            a.style[transform] = 'translate3D(0,' + a.y + 'px,0)';

        }

        function countBlockSize() {
            blockSize = body.offsetWidth / 4;
            body.style.height = window.innerHeight + 'px';
            GameLayerBG.style.height = window.innerHeight + 'px';
            touchArea[0] = window.innerHeight - blockSize * 0;
            touchArea[1] = window.innerHeight - blockSize * 3;
        }
        var _gameBBList = [],
            _gameBBListIndex = 0,
            _gameOver = false,
            _gameStart = false,
            _gameTime, _gameTimeNum, _gameScore;

        function gameInit() {
            createjs.Sound.registerSound({
                src: "/static/py/images/1.mp3",
                id: "err"
            });
            createjs.Sound.registerSound({
                src: "/static/py/images/2.mp3",
                id: "end"
            });
            createjs.Sound.registerSound({
                src: "/static/py/images/3.mp3",
                id: "tap"
            });
            gameRestart();
        }

        function gameRestart() {
            console.log('gameRestart');
            _gameBBList = [];
            _gameBBListIndex = 0;
            _gameScore = 0;
            _gameOver = false;
            _gameStart = false;
            _gameTimeNum = 2000;
            GameTimeLayer.innerHTML = creatTimeText(_gameTimeNum);
            countBlockSize();
            refreshGameLayer(GameLayer[0]);
            refreshGameLayer(GameLayer[1], 1);
        }

        function gameStart() {
            _gameStart = true;
            _gameTime = setInterval(gameTime, 10);
        }

        function gameOver() {
            _gameOver = true;
            clearInterval(_gameTime);
            setTimeout(function() {
                GameLayerBG.className = '';
                showGameScoreLayer();
            }, 1500);
        }

        function gameTime() {
            _gameTimeNum--;
            if (_gameTimeNum <= 0) {
                GameTimeLayer.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;时间到！';
                gameOver();
                GameLayerBG.className += ' flash';
                createjs.Sound.play("end");
            } else {
                GameTimeLayer.innerHTML = creatTimeText(_gameTimeNum);
            }
        }

        function creatTimeText(n) {
            var text = (100000 + n + '').substr(-4, 4);
            text = '&nbsp;&nbsp;' + text.substr(0, 2) + "'" + text.substr(2) + "''"
            return text;
        }
        var _ttreg = / t{1,2}(\d+)/,
            _clearttClsReg = / t{1,2}\d+| bad/;

        function refreshGameLayer(box, loop, offset) {
            var i = Math.floor(Math.random() * 1000) % 4 + (loop ? 0 : 4);
            for (var j = 0; j < box.children.length; j++) {
                var r = box.children[j],
                    rstyle = r.style;
                rstyle.left = (j % 4) * blockSize + 'px';
                rstyle.bottom = Math.floor(j / 4) * blockSize + 'px';
                rstyle.width = blockSize + 'px';
                rstyle.height = blockSize + 'px';
                r.className = r.className.replace(_clearttClsReg, '');
                if (i == j) {
                    _gameBBList.push({
                        cell: i % 4,
                        id: r.id
                    });
                    r.className += ' t' + (Math.floor(Math.random() * 1000) % 5 + 1);
                    r.notEmpty = true;
                    i = (Math.floor(j / 4) + 1) * 4 + Math.floor(Math.random() * 1000) % 4;
                } else {
                    r.notEmpty = false;
                }
            }
            if (loop) {
                box.style.webkitTransitionDuration = '0ms';
                box.style.display = 'none';
                box.y = -blockSize * (Math.floor(box.children.length / 4) + (offset || 0)) * loop;
                setTimeout(function() {
                    box.style[transform] = 'translate3D(0,' + box.y + 'px,0)';
                    setTimeout(function() {
                        box.style.display = 'block';
                    }, 100);
                }, 200);
            } else {
                box.y = 0;
                box.style[transform] = 'translate3D(0,' + box.y + 'px,0)';
            }
            box.style[transitionDuration] = '150ms';
        }

        function gameLayerMoveNextRow() {
            for (var i = 0; i < GameLayer.length; i++) {
                var g = GameLayer[i];
                g.y += blockSize;
                if (g.y > blockSize * (Math.floor(g.children.length / 4))) {
                    refreshGameLayer(g, 1, -1);
                } else {
                    g.style[transform] = 'translate3D(0,' + g.y + 'px,0)';
                }
            }
        }

        function gameTapEvent(e) {
            if (_gameOver) {
                return false;
            }
            var tar = e.target;
            var y = e.clientY || e.targetTouches[0].clientY,
                x = (e.clientX || e.targetTouches[0].clientX) - body.offsetLeft,
                p = _gameBBList[_gameBBListIndex];
            if (y > touchArea[0] || y < touchArea[1]) {
                return false;
            }
            if ((p.id == tar.id && tar.notEmpty) || (p.cell == 0 && x < blockSize) || (p.cell == 1 && x > blockSize && x < 2 * blockSize) || (p.cell == 2 && x > 2 * blockSize && x < 3 * blockSize) || (p.cell == 3 && x > 3 * blockSize)) {
                if (!_gameStart) {
                    gameStart();
                }
                createjs.Sound.play("tap");
                tar = document.getElementById(p.id);
                tar.className = tar.className.replace(_ttreg, ' tt$1');
                _gameBBListIndex++;
                _gameScore++;
                gameLayerMoveNextRow();
            } else if (_gameStart && !tar.notEmpty) {
                createjs.Sound.play("err");
                gameOver();
                tar.className += ' bad';
            }
            return false;
        }

        function createGameLayer() {
            var html = '<div id="GameLayerBG">';
            for (var i = 1; i <= 2; i++) {
                var id = 'GameLayer' + i;
                html += '<div id="' + id + '" class="GameLayer">';
                for (var j = 0; j < 10; j++) {
                    for (var k = 0; k < 4; k++) {
                        html += '<div id="' + id + '-' + (k + j * 4) + '" num="' + (k + j * 4) + '" class="block' + (k ? ' bl' : '') + '"></div>';
                    }
                }
                html += '</div>';
            }
            html += '</div>';

            html += '<div id="GameTimeLayer"></div>';

            return html;
        }

        function closeWelcomeLayer() {
            var l = document.getElementById('welcome');
            l.style.display = 'none';
        }

        function showWelcomeLayer() {
            var l = document.getElementById('welcome');
            l.style.display = 'block';
        }

        function showGameScoreLayer() {
            var l = document.getElementById('GameScoreLayer');
            var c = document.getElementById(_gameBBList[_gameBBListIndex - 1].id).className.match(_ttreg)[1];
            l.className = l.className.replace(/bgc\d/, 'bgc' + c);
            document.getElementById('GameScoreLayer-text').innerHTML = shareText(_gameScore);
            // document.getElementById('GameScoreLayer-score').innerHTML = '得分&nbsp;&nbsp;'+_gameScore;
            var bast = cookie('bast-score');
            if (!bast || _gameScore > bast) {
                bast = _gameScore;
                cookie('bast-score', bast, 100);
            }
            // document.getElementById('GameScoreLayer-bast').innerHTML = '最佳&nbsp;&nbsp;'+bast;
            l.style.display = 'block';
            window.shareData.tTitle = '这家伙好嚣张！在20秒内跑出惊人成绩' + (_gameScore * 10) + '米，并且大喊独孤求败，不服来战！';

            // 微信分享
            wx.config({
                  debug: false,
                  appId: '{$wxConfig['appId']}',
                  timestamp: '{$wxConfig['timestamp']}',
                  nonceStr: '{$wxConfig['nonceStr']}',
                  signature: '{$wxConfig['signature']}',
                  jsApiList: {eval echo json_encode($wxConfig['jsApiList'])},
            });
            wx.ready(function () {
              wx.onMenuShareAppMessage({
                title: window.shareData.tTitle, // 分享标题
                desc: window.shareData.tContent, // 分享描述
                link: window.shareData.timeLineLink, // 分享链接
                imgUrl: window.shareData.imgUrl, // 分享图标
                success: function () {
                  // 用户确认分享后执行的回调函数
                  document.location.href = mebtnopenurl;
                },
                cancel: function () {
                  // 用户取消分享后执行的回调函数
                  document.location.href = mebtnopenurl;
                }
                });
                wx.onMenuShareTimeline({
                  title: window.shareData.tTitle, // 分享标题
                  desc: window.shareData.tContent, // 分享描述
                  link: window.shareData.timeLineLink, // 分享链接
                  imgUrl: window.shareData.imgUrl, // 分享图标
                  success: function () {
                      // 用户确认分享后执行的回调函数
                      document.location.href = mebtnopenurl;
                  },
                  cancel: function () {
                      // 用户取消分享后执行的回调函数
                      document.location.href = mebtnopenurl;
                  }
                });
            });
        }

        function hideGameScoreLayer() {
            var l = document.getElementById('GameScoreLayer');
            l.style.display = 'none';
        }

        function replayBtn() {
            gameRestart();
            hideGameScoreLayer();
        }

        function backBtn() {
            gameRestart();
            hideGameScoreLayer();
            showWelcomeLayer();
        }
        var mebtnopenurl = 'http://run.hupu.com/mobile';

        function shareText(score) {
            if (score <= 49)
                return '你跑了<span class="score">' + score * 10 + '</span>米<br/>还看不到博尔特的<span class="num-s">脚后跟</span>';
            if (score <= 99)
                return '你跑了<span class="score">' + score * 10 + '</span>米<br/><br/>哟！还可以，但是想超过博尔特你还要再快点。';
            if (score <= 149)
                return '厉害了word哥！你跑了<span class="score">' + score * 10 + '</span>米<br/><br/>你与博尔特不相上下，请问小哥你的手速是怎么练成的？';
            if (score <= 199)
                return '不不不不可能！你跑了<span class="score">' + score * 10 + '</span>米！<br/><br/>你不是人类，什么翔都会被你吓出翔！';

            return '你跑了<span class="score">' + score * 10 + '</span>米<br/><br/>如果你不是作弊，那你就是神！';
        }

        function toStr(obj) {
            if (typeof obj == 'object') {
                return JSON.stringify(obj);
            } else {
                return obj;
            }
            return '';
        }

        function cookie(name, value, time) {
            if (name) {
                if (value) {
                    if (time) {
                        var date = new Date();
                        date.setTime(date.getTime() + 864e5 * time), time = date.toGMTString();
                    }
                    return document.cookie = name + "=" + escape(toStr(value)) + (time ? "; expires=" + time + (arguments[3] ? "; domain=" + arguments[3] + (arguments[4] ? "; path=" + arguments[4] + (arguments[5] ? "; secure" : "") : "") : "") : ""), !
                        0;
                }
                return value = document.cookie.match("(?:^|;)\\s*" + name.replace(/([-.*+?^${}()|[\]\/\\])/g, "\\$1") + "=([^;]*)"), value = value && "string" == typeof value[1] ? unescape(value[1]) : !1, (/^(\{|\[).+\}|\]$/.test(value) ||
                    /^[0-9]+$/g.test(value)) && eval("value=" + value), value;
            }
            var data = {};
            value = document.cookie.replace(/\s/g, "").split(";");
            for (var i = 0; value.length > i; i++) name = value[i].split("="), name[1] && (data[name[0]] = unescape(name[1]));
            return data;
        }
        document.write(createGameLayer());

        function share() {
            document.getElementById('share-wx').style.display = 'block';
            document.getElementById('share-wx').onclick = function() {
                this.style.display = 'none';
            };
        }

        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {

            WeixinJSBridge.on('menu:share:appmessage', function(argv) {
                WeixinJSBridge.invoke('sendAppMessage', {
                    "img_url": window.shareData.imgUrl,
                    "link": window.shareData.timeLineLink,
                    "desc": window.shareData.tContent,
                    "title": window.shareData.tTitle
                }, function(res) {
                    document.location.href = mebtnopenurl;
                })
            });

            WeixinJSBridge.on('menu:share:timeline', function(argv) {
                WeixinJSBridge.invoke('shareTimeline', {
                    "img_url": window.shareData.imgUrl,
                    "img_width": "720",
                    "img_height": "720",
                    "link": window.shareData.timeLineLink,
                    "desc": window.shareData.tContent,
                    "title": window.shareData.tTitle
                }, function(res) {
                    document.location.href = mebtnopenurl;
                });
            });
        }, false);
    </script>

    <div id="GameScoreLayer" class="BBOX SHADE bgc1" style="display:none;">
        <div class="logo">
            <img src="/static/py/images/logo-min.png" alt="">
        </div>
        <div style="padding:0 5%;">
            <div class="game-score-wp">
                <div id="GameScoreLayer-text" class="GameScoreLayer-text"></div>
            </div>

            <br/>

            <div id="GameScoreLayer-btn" class="BOX">
                <div class="btn BOX-S" onclick="replayBtn()">再跑一次</div>&nbsp;
                <div class="btn BOX-S" onclick="share()">召唤好友来比拼</div>
            </div>
            <br/>
            <div class="img-01">
                <img src="/static/py/images/down-sum-min.png?v=1" alt="">
            </div>
            <div class="down-load">
                <a href="http://www.hdb.com/party/d8tkb.html"></a>
            </div>
        </div>
        <div class="qrcode"><img src="/static/py/images/qrcode-min.png" alt=""></div>
    </div>

    <div id="welcome" class="SHADE BOX-M">
        <div class="FILL" style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;">
            <div class="logo">
                <img src="/static/py/images/logo-min.png" alt="">
            </div>
            <div style="margin:0 8% 0 9%;">
                <img src="/static/py/images/summary-min.png" alt="">
                <br/><br/>
                <div id="ready-btn" class="btn loading"></div>
                <img src="/static/py/images/btn-sum-min.png" alt="">
            </div>
        </div>
    </div>

    <div id="landscape" class="SHADE BOX-M" style="background:rgba(0,0,0,.9);">
        <div id="landscape-text" style="color:#fff;font-size:3em;">请竖屏玩耍</div>
    </div>

    <div id="share-wx">
        <p style="text-align: right; padding-left: 10px;"><img src="/static/py/images/share-bg-min.png" id="share-wx-img"></p>
    </div>
    <script type="text/javascript">
        if (isDesktop)
            document.write('</div>');
    </script>
</body>

{template 'show/web-footer'}
